<template>
  <div class="dashboard">
    <!-- 顶部数字的数据展示 -->
    <el-row :gutter="10">
      <template v-for="(item, index) in amountList" :key="index">
        <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6">
          <count-cart v-bind="item"></count-cart>
        </el-col>
      </template>
    </el-row>
    <!-- 中间部分的图表 -->
    <el-row :gutter="10">
      <el-col :span="7">
        <chart-card>
          <pie-echart :pieData="showGoodsCategoryCount" />
        </chart-card>
      </el-col>
      <el-col :span="10">
        <chart-card>
          <map-echart :mapData="showGoodsAddressSale" />
        </chart-card>
      </el-col>
      <el-col :span="7">
        <chart-card>
          <role-echart :roseData="showGoodsCategoryCount" />
        </chart-card>
      </el-col>
    </el-row>
    <!-- 底部部分的图表 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <chart-card>
          <line-echart v-bind="showGoodsCategorySale" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card>
          <bar-echart v-bind="showGoodsCategoryFavor" />
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import countCart from './c-cpns/countCard/countCart.vue'
import chartCard from './c-cpns/chartCard/chartCard.vue'
import {
  pieEchart,
  lineEchart,
  roleEchart,
  barEchart,
  mapEchart
} from '@/components/pageEcharts/index'
import useAnalysisStore from '@/store/main/analysis/analysis'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
// 发送获取顶部数据的请求
const analysisStore = useAnalysisStore()
analysisStore.fetchAnalysisDataAction()
// 获取数据
const {
  amountList,
  goodsCategorySale,
  goodsCategoryCount,
  goodsCategoryFavor,
  goodsAddressSale
} = storeToRefs(analysisStore)
console.log(goodsCategorySale, goodsCategoryCount)

// 获取数据
const showGoodsCategoryCount = computed(() => {
  return goodsCategoryCount.value.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
})
const showGoodsCategorySale = computed(() => {
  const labels = goodsCategorySale.value.map((item) => item.name)
  const values = goodsCategorySale.value.map((item) => item.goodsCount)
  return { labels, values }
})

const showGoodsCategoryFavor = computed(() => {
  const labels = goodsCategoryFavor.value.map((item) => item.name)
  const values = goodsCategoryFavor.value.map((item) => item.goodsFavor)
  return { labels, values }
})

const showGoodsAddressSale = computed(() => {
  return goodsAddressSale.value.map((item) => ({
    name: item.address,
    value: item.count
  }))
})
</script>

<style lang="less" scoped>
.dashboard {
}
.el-row {
  margin-bottom: 10px;
}
</style>
